<?php 
	session_start();
?>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>iQuit</title>
        <meta name="description" content="A mobile application to help you quit smoking.">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/style.css">
		<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
		<script>
			function init() {
				//function to hide the current question and show the next question
				function showNext(id) {
					console.log(id);
					document.getElementById("q" + id).style.display = "none";
					document.getElementById("q" + parseInt(id + 1)).style.display = "block";
					return false;
				}
				
				//add event listeners to the contine buttons
				for (var i = 1; i < 6; i++) {
					(function (i) {
						var btn = document.getElementById("continue-btn-q"+i);
						console.log(i);
						console.log(btn);
						btn.addEventListener('click', function(e) {
							e.preventDefault();
							showNext(i);
						}, false);
						
						btn.addEventListener('tap', function(e) {
							e.preventDefault();
							showNext(i);
						}, false);
					}) (i);
				}
			}			
			
			window.addEventListener('load', init, false);
			
		</script>
	</head>
	<body>
		<div id="main-wrapper">
			<header>
				iQuit
			</header>
			<div id="content">
			<div style="padding-left: 20px; padding-right: 20px;">
				<form name="form-q" id="form-q" action="index.php" method="post">
					<div class="pop-up" id="q1" style="display: block;">
						<div class="text">
							<center><img src="images/brandlogo.png" alt="iQuit"/></center><br/>
							<span style="font-weight: 600; color: #3A998C;">Congratulations on taking your first step towards quitting smoking! </span> <br /><br />
							To help you on your journey, we just need to ask you a few questions
							about your current smoking habits.<br /><br />
						</div>	
						<div class="btn">
							<button type="button" value="continue" id="continue-btn-q1" class="continue-btn">Continue</button>
						</div>					
					</div>
					<div class="pop-up" id="q2" style="display: none;">
						<div class="text"><br/><br/>
							Are you serious about quitting smoking?
						</div>					
					
						<div class="btn">
							<button type="button" value="continue" id="continue-btn-q2" class="continue-btn">Yes</button> <button type="button" value="continue" id="continue-btn-q2" class="continue-btn">No</button>
							<br/>
							<span style="font-size: 12px; color: #3A998C;">Your answer is not distributed to anyone for your privacy.</span>
						</div>
					</div>
					<div class="pop-up" id="q3" style="display: none;">
						<div class="text"><br/><br/>
							On average, how many cigarettes do you smoke per day?
						</div>					
						<input type="text" id="per-day" name="per-day" value="0"/>
						<div class="btn">
							<button type="button" value="continue" id="continue-btn-q3" class="continue-btn">Continue</button>
							<br/>
							<span style="font-size: 12px; color: #3A998C;">Your answer is not distributed to anyone for your privacy.</span>
						</div>
					</div>
					<div class="pop-up" id="q4" style="display: none;">
						<div class="text"><br/><br/>
							On average, how much do you spend on cigarettes per week?
						</div>
						<label for="per-week">$</label><input type="text" id="per-week" name="per-week" value="0"/>
						<div class="btn">
							<button type="button" value="continue" id="continue-btn-q4" class="continue-btn">Continue</button>
							<br/>
							<span style="font-size: 12px; color: #3A998C;">Your answer is not distributed to anyone for your privacy.</span>
						</div>
					</div>
					<div class="pop-up" id="q5" style="display: none;">
						<div class="text"><br/><br/>
							What savings goal would you like to work towards?
						</div>
						<label for="savings-goal-input">$</label><input type="text" id="savings-goal-input" name="savings-goal-input" value="0"/>
						<div class="btn">
							<button type="button" value="continue" id="continue-btn-q5" class="continue-btn">Continue</button>
							<br/>
							<span style="font-size: 12px; color: #3A998C;">Your answer is not distributed to anyone for your privacy.</span>
						</div>
					</div>
					<div class="pop-up" id="q6" style="display: none;">
						<div class="text"><center><img src="images/brandlogo.png" alt="iQuit"/></center><br/>
							That's all we need to know.  Time to start using iQuit!  <br /><br />
						</div>	
						<input type="submit" name="form-submit" value="Done" id="continue-btn-q6" class="continue-btn">											
					</div>
				</form>
				</div>
			</div>
		</div>
	</body>
</html>